<template>
  <div class="bg-[#1a2c38] w-full min-375 h-auto">
    <div class="container w-full mt-4">
      <!-- 轮播图 -->
      <el-carousel :interval="4000" arrow="always" motion-blur="true" autoplay>
        <el-carousel-item
          class="swiper_height"
          v-for="item in bannerList"
          :key="item"
          @click="clickGame(item.link_url)"
        >
          <img :src="item.img_url" style="width: 100%" alt="" />
          <!-- <h3 justify="center">{{ item }}</h3> -->
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script setup name="Tools">
import {
  watch,
  ref,
  onMounted,
  nextTick,
  getCurrentInstance,
  defineAsyncComponent
} from "vue";
const gameSwiper = defineAsyncComponent(() =>
  import("../../components/gameSwiper/index.vue")
);
// const List = defineAsyncComponent(() => import("../../components/List/index.vue"));

import {
  casionInit,
  gameList,
  gameSearch,
  typeIcon,
  gameCollect,
  gameCollectList
} from "../../api/casion.js";
import { init } from "../../api/user.js";
import { mainNav } from "@/store/nav";
import { mainAct } from "../../store/activeda";
// import { storeToRefs } from "pinia"; //引入pinia转换
const main = mainNav();
const main2 = mainAct();
import more from "@/components/more/index.vue";

const {
  appContext: {
    config: { globalProperties }
  }
} = getCurrentInstance();

const games = ref([]);
const tabs = ref([
  {
    name: "All",
    category_id: "all",
    active: true
  }
]);
const hallGames = ref([]);
const tabsName = ref("");
const tabsIcon = ref(null);

// // Add more games to make it 20
// while (games.value.length < 20) {
//   games.value.push(...games.value);
// }
// games.value = games.value.slice(0, 20);
const showAll = ref(false);
const currentId = ref(null);
const currentPage = ref(1);
const showtotal = ref(null);
const showNextPage = ref(false);
//点击tabs
const nextPage = async () => {
  currentPage.value += 1;
  let data = {
    category_id: currentId.value,
    page_size: 28,
    page: currentPage.value
  };
  let res = await gameList(data);
  if (res.data.list) {
    showtotal.value = res.data.total;
    if (res.data.total > res.data.page * res.data.page_size) {
      console.log("显示翻页按钮");
      showNextPage.value = true;
    } else {
      showNextPage.value = false;
    }
    res.data.list.forEach(item => {
      if (!item.img_url.startsWith("http")) {
        item.img_url = main2.static_base_url + item.img_url;
      }
    });
    games.value.push(...res.data.list);
  } else {
    // games.value = [];
  }
};
const choseType = async (id, i, icon) => {
  games.value = [];
  currentId.value = id;
  currentPage.value = 1;
  tabsIcon.value = icon;
  // console.log(id,i);
  if (id == "all") {
    showAll.value = false;
  } else {
    showAll.value = true;
    let data = {
      category_id: id,
      page_size: 28,
      page: currentPage.value
    };
    let res = await gameList(data);
    if (res.data.list) {
      showtotal.value = res.data.total;
      if (res.data.total > res.data.page * res.data.page_size) {
        console.log("显示翻页按钮");
        showNextPage.value = true;
      } else {
        showNextPage.value = false;
      }
      res.data.list.forEach(item => {
        if (!item.img_url.startsWith("http")) {
          item.img_url = main2.static_base_url + item.img_url;
        }
      });
      games.value.push(...res.data.list);
    } else {
      games.value = [];
    }
    // tabs.value[i].active = true;
    // console.log(res);
  }
  //修改状态 & 名字
  tabs.value.forEach((item, i2) => {
    if (i2 === i) {
      item.active = true;
      tabsName.value = item.name;
    } else {
      item.active = false;
    }
  });
};

onMounted(() => {
  getCasionInit();
});

const bannerList = ref([]);
const getCasionInit = async () => {
  let data = {
    page_size: 20
  };
  let res = await casionInit(data);
  bannerList.value = res.data.banner_list;
  bannerList.value.forEach(item => {
    item.img_url = main2.static_base_url + item.img_url;
  });
};
</script>
<style scoped lang="less">
.my-swipe {
  width: 80vw;

  margin: auto;
  margin-bottom: 2rem;
  // .van-swipe-item {
  //   color: #fff;
  //   font-size: 20px;
  //   line-height: 150px;
  //   text-align: center;
  //   img {
  //     width: 80vw;
  //     max-width: 1200px;
  //     min-width: 500px;
  //   }
  // }
}

// .el-carousel__item h3 {
//   color: #475669;
//   opacity: 0.75;
//   line-height: 300px;
//   margin: 0;
//   text-align: center;
// }

.el-carousel__item:nth-child(2n) {
  // background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  // background-color: #d3dce6;
}

::v-deep(.el-carousel__indicators) {
  display: none;
}

.el-carousel__indicators,
.el-carousel__indicator--horizontal {
  display: none;
}

.nav-item {
  color: #ffffff;
  padding: 10px 20px;
  cursor: pointer;
  white-space: nowrap;
}

.nav-item:hover {
  background-color: #2f4553;
  border-radius: 20px;
}

.nav-item.active {
  background-color: #2f4553;
  border-radius: 20px;
}

.container {
  overflow: hidden;
}

.swiper_height {
  height: 290px;
}

::v-deep(.el-carousel__container) {
  height: 290px;
  // height: unset !important;
}

@media (max-width: 600px) {
  .swiper_height {
    height: 150px !important;
  }

  ::v-deep(.el-carousel__container) {
    height: 150px;
  }

  .game-card {
    width: 30% !important;
    max-width: unset;
  }

  .banner {
    height: 80px !important;
    line-height: 80px !important;
  }

  .gameBox {
    grid-gap: 10px 5px !important;
    grid-template-columns: repeat(3, 1fr) !important;

    .item {
      width: 28vw !important;
      max-width: unset;
      min-width: unset;
    }
    .star {
      display: block !important;
    }
    .mb {
      opacity: 1 !important;
    }
  }
}

.game-card:hover {
  transform: translateY(-4%);
}

.game-card {
  max-width: 200px;
  width: 200px;
  height: 250px;
  cursor: pointer;
  background-color: #667386;
  border-radius: 10px;
  /* padding: 20px; */
  text-align: center;
  margin: 10px;
  /* flex: 1 0 21%; Adjust the flex-basis to control the number of items per row */
  position: relative;
  will-change: transform;
  transition: 0.3s;

  .game-card-con {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    img {
      width: auto;
      min-width: 200px;
      border-radius: 10px;
    }

    p {
      margin-top: 10px;
      color: #ffffff;
    }

    .players {
      color: #00ff00;
    }
  }
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  background-color: #1c2a38;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  padding-top: 15px;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #2f4453;
}

.pagination button:first-child {
  margin-right: 0;
  border-radius: 40% 0 0 40%;
  border-right: 0;
}

.pagination button:last-child {
  margin-left: 0;
  border-radius: 0 40% 40% 0;
}

.pagination button.disabled {
  background-color: #1a2c38;
  color: #667386;
  cursor: not-allowed;
}

.banner {
  color: #fff;
  font-weight: 600;
  font-size: 20px;
  height: 115px;
  line-height: 115px;
}

.gameBox {
  background-color: #1a2c38;
  display: grid;
  grid-gap: 2rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  .hover-img {
    will-change: transform;
    transition: 0.3s;
  }
  .item img {
    width: 162px;
    // height: 216px;
    color: #fff;
    // background-color: #667386;
    text-align: center;
    line-height: 216px;
    border-radius: 4px;
    // cursor: pointer;
    // will-change: transform;
    // transition: 0.3s;
  }
  .star {
    display: none;
  }
  .mb {
    opacity: 0;
    transition-duration: 1s;
    transition-property: opacity;
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(0, 0, 0, 0.3) 25%,
      rgba(0, 0, 0, 0.5) 60%,
      rgba(48, 48, 48, 0.9) 100%
    );
  }

  .item:hover .hover-img {
    transform: translateY(-4%);
    .star {
      display: block;
      z-index: 12;
    }
    .mb {
      opacity: 1;
      transition-duration: 1s;
      transition-property: opacity;
      z-index: 11;
    }
  }
}
</style>
